import 'package:flutter/material.dart';

class BottomNavBarPage extends StatefulWidget {
  const BottomNavBarPage({super.key});

  @override
  State<BottomNavBarPage> createState() => _BottomNavBarPageState();
}

class _BottomNavBarPageState extends State<BottomNavBarPage> {
  int _currentIndex = 0;

  final List<Widget> _pages = const [
    Center(child: Text('首页内容')),
    Center(child: Text('消息内容')),
    Center(child: Text('设置内容')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BottomNavigationBar 示例')),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 当前选中项
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },

        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            activeIcon: Icon(Icons.home_filled), // 选中状态图标
            label: '首页',
            backgroundColor: Colors.blue, // 用于 shifting 模式
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            activeIcon: Icon(Icons.message_outlined),
            label: '消息',
            backgroundColor: Colors.green,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
            backgroundColor: Colors.orange,
          ),
        ],

        // 外观属性
        type: BottomNavigationBarType.fixed, // 可选：fixed / shifting
        selectedItemColor: Colors.amber, // 选中文字/图标颜色
        unselectedItemColor: Colors.white70, // 未选中文字/图标颜色
        selectedFontSize: 14,
        unselectedFontSize: 12,
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
        unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic),
        backgroundColor: Colors.black, // 整个 bar 背景色
        elevation: 8.0, // 阴影高度
        iconSize: 24,
        enableFeedback: true, // 是否启用震动反馈
        showSelectedLabels: true,
        showUnselectedLabels: true,
        landscapeLayout: BottomNavigationBarLandscapeLayout.centered, // 横屏布局
      ),
    );
  }
}
